<template>
  <!-- 到货通知新增 dialog 开始 -->
  <el-dialog :close-on-click-modal="false" :visible.sync="dialogVisible" :before-close="close">
    <el-form align="left" ref="ruleFormAdd" size="mini" :model="increaseForm">
      <el-row :gutter="10">
        <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item
            :label="$t('m.in.consignor')"
            :label-width="formLabelWidth"
            prop="arrivalnoticeDto.consignorname"
          >
            <el-select
              @change="setConsignor"
              v-model="increaseForm.arrivalnoticeDto.consignorname"
              :placeholder="$t('m.choose')"
            >
              <el-option
                v-for="item in consignor"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('m.in.deliverycompany')" :label-width="formLabelWidth">
            <el-input
              maxlength="20"
              show-word-limit
              size="mini"
              v-model="increaseForm.arrivalnoticeDto.deliverycompany"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('m.in.contact')" :label-width="formLabelWidth" prop="contact">
            <el-input
              maxlength="20"
              show-word-limit
              size="mini"
              v-model="increaseForm.arrivalnoticeDto.contact"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item
            :label="$t('m.in.ordernumber')"
            :label-width="formLabelWidth"
            prop="arrivalnoticeDto.ordernumber"
          >
            <el-input
              maxlength="20"
              show-word-limit
              @input="check_num()"
              size="mini"
              v-model="increaseForm.arrivalnoticeDto.ordernumber"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('m.in.suppliername')"
            :label-width="formLabelWidth"
            prop="arrivalnoticeDto.suppliername"
          >
            <el-select
              @change="setSupplier"
              v-model="increaseForm.arrivalnoticeDto.suppliername"
              :placeholder="$t('m.choose')"
            >
              <el-option
                v-for="item in supplier"
                :key="item.supplierid"
                :label="item.suppliername"
                :value="item.supplierid"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('m.in.platenumber')"
            :label-width="formLabelWidth"
            prop="platenumber"
          >
            <el-input
              maxlength="20"
              show-word-limit
              size="mini"
              v-model="increaseForm.arrivalnoticeDto.platenumber"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item
            :label="$t('m.in.warehouse')"
            :label-width="formLabelWidth"
            prop="arrivalnoticeDto.warehouseid"
          >
            <el-select
              v-model="increaseForm.arrivalnoticeDto.warehouseid"
              :placeholder="$t('m.choose')"
            >
              <el-option
                v-for="item in warehouse"
                :key="item.warehouseid"
                :label="item.warehousename"
                :value="item.warehouseid"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('m.in.typename')"
            :label-width="formLabelWidth"
            prop="arrivalnoticeDto.typename"
          >
            <el-select
              @change="setType"
              v-model="increaseForm.arrivalnoticeDto.typename"
              :placeholder="$t('m.choose')"
            >
              <el-option
                v-for="(item,index) in arrivaltype"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('m.in.deliveryman')"
            :label-width="formLabelWidth"
            prop="deliveryman"
          >
            <el-input
              maxlength="20"
              show-word-limit
              size="mini"
              v-model="increaseForm.arrivalnoticeDto.deliveryman"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item :label="$t('m.remark')" :label-width="formLabelWidth" prop="remark">
            <el-input
              maxlength="100"
              show-word-limit
              type="textarea"
              v-model="increaseForm.arrivalnoticeDto.remark"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="section">
        <template>
          <el-table :data="increaseForm.arrivalnoticedetailList" border empty-text size="mini">
            <el-table-column :label="$t('m.index')" width="50" align="center">
              <template slot-scope="scope">{{scope.$index+1}}</template>
            </el-table-column>
            <el-table-column label="SKU" width="180" align="center">
              <template slot-scope="scope">
                <el-form-item>
                  <el-input
                    maxlength="20"
                    show-word-limit
                    @input="func1"
                    @blur="blur1&&getSkuBlur(scope.$index)"
                    @keyup.enter.native="getSkuEnter(scope.$index)"
                    v-model="scope.row.productspeccode"
                    size="mini"
                    required
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="SupplierCode" width="120" align="center">
              <template slot-scope="scope">
                <el-form-item>
                  <span :v-model="scope.row.suppliercode">{{scope.row.suppliercode}}</span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column :label="$t('m.in.productname')" align="center">
              <template slot-scope="scope">
                <el-form-item>
                  <span :v-model="scope.row.productname">{{scope.row.productname}}</span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column :label="$t('m.in.productspec')" align="center">
              <template slot-scope="scope">
                <el-form-item>
                  <span :v-model="scope.row.productspec">{{scope.row.productspec}}</span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column :label="$t('m.in.plannedquantity')" align="center">
              <template slot-scope="scope">
                <el-form-item
                  v-for="(item,index) in scope.row.plannedArrivalDtoList"
                  prop="arrivalnoticedetailList[0].plannedArrivalDtoList[0].plannedquantity"
                  :key="index"
                >
                  <el-input
                    maxlength="10"
                    show-word-limit
                    v-model="item.plannedquantity"
                    size="mini"
                    required
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('m.in.plandate')"
              prop="startdate"
              width="160"
              align="center"
            >
              <template slot-scope="scope">
                <el-form-item v-for="(item,index) in scope.row.plannedArrivalDtoList" :key="index">
                  <el-date-picker
                    :picker-options="pickerOptions"
                    value-format="timestamp"
                    @input="getDate"
                    size="mini"
                    v-model="item.planneddate"
                    type="date"
                    :placeholder="$t('m.in.choosedate')"
                    style="width: 100%;padding-right:0"
                  ></el-date-picker>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label width="40" align="center">
              <template slot-scope="scope">
                <el-form-item v-for="(item,index) in scope.row.plannedArrivalDtoList" :key="index">
                  <span v-if="index==0">
                    <el-button @click="add(scope.$index)" class="add" type="success" circle>+</el-button>
                  </span>
                  <span v-else>
                    <el-button
                      @click="reduce(scope.$index,index)"
                      class="delete"
                      type="danger"
                      circle
                    >-</el-button>
                  </span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column :label="$t('m.operation')" width="120" align="center">
              <template slot-scope="scope">
                <el-form-item>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)"
                  >{{$t('m.delete')}}</el-button>
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
          <el-row type="flex" :gutter="20" style=" margin-left: 0px; margin-right: 0px;">
            <!-- <el-col :span="3"><div class="grid-content bg-purple"></div></el-col> -->
            <el-col :span="3">
              <div class="grid-content bg-purple">
                <el-button
                  type="primary"
                  size="mini"
                  @click="addProduct()"
                >{{$t('m.in.addproduct')}}</el-button>
              </div>
            </el-col>
            <!-- <el-col :span="19"><div class="grid-content bg-purple"></div></el-col> -->
          </el-row>
        </template>
      </div>
    </el-form>
    <div class="btns">
      <el-button size="mini" @click="dialogFormVisible1 = false">{{$t('m.cancel')}}</el-button>
      <el-button size="mini" type="primary" @click="handIncrease()">{{$t('m.confirm')}}</el-button>
    </div>
  </el-dialog>
  <!-- 到货通知新增 dialog 结束 -->
</template>

<script>
export default {
  components:{},
  props:['dialogVisible', 'detail', 'consignor'],
  data(){
    return {
      increaseForm:{
        arrivalnoticeDto:{
          arrivalnoticeid:null,
          auditopinion:'',
          consignorid:null,
          consignorname:'',
          contact:'',
          createdate:null,
          createid:null,
          creator:'',
          deliverycompany:'',
          deliveryman:'',
          noticenumber:'',
          ordernumber:'',
          platenumber:'',
          remark:'',
          state:null,
          statename:'',
          supplierid:null,
          suppliername:'',
          typeid:null,
          typename:'',
          warehouseid:null
        },
        arrivalnoticedetailList:[
          {
            plannedArrivalDtoList:[
              {
                arrivalnoticedetailid:null,
                planneddate:null,
                plannedquantity:null
              }
            ],
            productname:'',
            productspec:'',
            productspeccode:'',
            suppliercode:''
          }
        ]
      },
      formLabelWidth:'140px'
    }
  },
  watch:{},
  computed:{},
  methods:{
    close(){
      this.$emit('close')
    },
    save(){
      this.$refs['ruleFormAdd'].validate(valid => {
        if (valid) this.$emit('save', this.increaseForm)
      })
    },
    setConsignor(id){
      this.$emit('setConsignor', id)
    },
    setSupplier(id){
      this.$emit('setSupplier', id)
    }
  },
  created(){},
  mounted(){
    if (this.detail)
      this.increaseForm = Object.assign({}, this.increaseForm, this.detail)
  }
}
</script>
<style lang="scss" scoped>
</style>